<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">


<div class="">
    <div class="page-title">
        <div class="title_left">
            <h3>角色管理</h3>
        </div>

        <div class="title_right">
            <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
                <div class="input-group">
                    <input type="text" id="searchRoleName" name="searchRoleName" class="form-control" placeholder="角色名">
                    <span class="input-group-btn">
                      <button class="btn btn-default" th:onclick="'javascript:searchRoleList()'"
                              type="button">Go!</button>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>

    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>角色管理
                        <small>列表</small>
                    </h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li><a  title="新增" th:onclick="'javascript:LoadAjaxContent(\'role/toAdd\')'" ><i class="fa fa fa-plus"></i></a>
                        </li>
                        <li><a  title="折叠" class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                        <li><a title="关闭" class="close-link"><i class="fa fa-close"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <table id="datatable" class="table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th style="width: 10%">序号</th>
                            <th style="width: 20%">角色名</th>
                            <th style="width: 40%">角色描述</th>
                            <th style="width: 10%">是否可用</th>
                            <th style="width: 20%">操作</th>
                        </tr>
                        </thead>

                        <tbody>


                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>
<script type="text/javascript">
    $.dataTablesSettings = {
        autoWidth: false,  //禁用自动调整列宽
        stripeClasses: ["odd", "even"],  //为奇偶行加上样式，兼容不支持CSS伪类的场合
        processing: true,  //隐藏加载提示,自行处理
        serverSide: true,  //启用服务器端分页
        searching: false,  //禁用原生搜索
        orderMulti: false,  //启用多列排序
        order: [],  //取消默认排序查询,否则复选框一列会出现小箭头
        renderer: "bootstrap",  //渲染样式：Bootstrap和jquery-ui
        pagingType: "simple_numbers",  //分页样式：simple,simple_numbers,full,full_numbers
        columnDefs: [{
            "targets": 'nosort',  //列的样式名
            "orderable": false    //包含上样式名‘nosort’的禁止排序
        }],
        ajax: function (data, callback, settings) {

            //封装请求参数
            var param = {};
            param.pageSize = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
            param.startIndex = data.start;//开始的记录序号
            param.pageIndex = (data.start / data.length) + 1;//当前页码
            param.searchRoleName = $("#searchRoleName").val();
            //ajax请求数据方法
            $.ajax({
                type: "POST",
                url: "/role/GetAjaxRoleList",//url请求的地址
                cache: false,  //禁用缓存
                data: param,  //传入组装的参数
                dataType: "json",
                success: function (result) {

                    //封装返回数据重要
                    var returnData = {};
                    //这里直接自行返回了draw计数器,应该由后台返回
                    returnData.draw = data.draw;
                    //返回数据全部记录
                    returnData.recordsTotal = result.totalCount;
                    //后台不实现过滤功能，每次查询均视作全部结果
                    returnData.recordsFiltered = result.totalCount;
                    //返回的数据列表
                    returnData.data = result.data;

                    //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                    //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                    callback(returnData);
                }
            });
        },
        //列表表头字段
        columns: [
            {
                data: null,
                defaultContent: ""
            },
            {"data": "rolename"},
            {"data": "roledesc"},
            {"data": "enable"},
            //新建列的 定义
            {
                className: "td-operation text-center",
                data: null,
                defaultContent: "",
                orderable: false,
                width: "160px"
            }
        ],
        //新建列的 数据内容
        "createdRow": function (row, data, index) {
            //行渲染回调,在这里可以对该行dom元素进行任何操作
            var $btn = $(
                '<a id="updateRole"   onclick="javascript:LoadAjaxContent(\'role/toUpdate?roleId=' + data.id + '\')" class="btn btn-info btn-xs"><i class="fa fa-pencil">编辑</i></a>' +
                '<a id="grantPermission"  class="btn btn-primary btn-xs"><i class="fa fa-child">授权</i></a>'  +
                '<a id="deleteRole"   onclick="javascript:LoadAjaxContent(\'role/delete?roleId=' + data.id + '\')" class="btn btn-danger btn-xs"><i class="fa fa-trash-o">删除</i></a>'
            );
            $('td', row).eq(4).append($btn);
            $('td', row).eq(0).text(index + 1);
        }
    };//定义全局变量
    var dataTable;
    $(document).ready(function () {
        dataTable = $("#datatable").dataTable($.dataTablesSettings);
    });

    function searchRoleList() {
        dataTable.fnDestroy(false);
        dataTable = $("#datatable").dataTable($.dataTablesSettings);
    }
</script>

</html>